<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layouts::header"></head>
<body>

<nav th:replace="layouts::navbar"></nav>

<div id="waypoint" class="m-margin- animated fadeIn">
    <div class="ui container m-opacity box-shadow-max">
        <div  class="ui bottom attached segment">
            <!--评论区域列表-->
            <form th:action="@{/netizens/save}" th:object="${netizen}" method="post">
                <div id="comment-form" class="ui form">
                    <input type="hidden" name="parentComment.id" value="-1">

                    <div class="fields">
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" th:field="${netizen.name}" placeholder="姓名" >
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="mail icon"></i>
                                <input type="text" th:field="${netizen.email}" placeholder="邮箱" >
                            </div>
                        </div>

                        <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="text" th:field="${netizen.wechatId}" placeholder="微信号" >
                        </div>
                    </div>
                        <div class="field  m-margin-bottom-small m-mobile-wide">
                            <button id="commentpost-btn" type="submit" class="ui teal button m-mobile-wide">新建网友</button>
                        </div>
                    </div>

                </div>
            </form>
        </div>

    </div>

</div>


<!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>-->

<!--<script th:inline="javascript">-->
<!--    //评论表单验证-->
<!--    $('.ui.form').form({-->
<!--        fields: {-->
<!--            title: {-->
<!--                identifier: 'content',-->
<!--                rules: [{-->
<!--                    type: 'empty',-->
<!--                    prompt: '请输入评论内容'-->
<!--                }-->
<!--                ]-->
<!--            },-->
<!--            content: {-->
<!--                identifier: 'nickname',-->
<!--                rules: [{-->
<!--                    type: 'empty',-->
<!--                    prompt: '请输入你的大名'-->
<!--                }]-->
<!--            },-->
<!--            type: {-->
<!--                identifier: 'email',-->
<!--                rules: [{-->
<!--                    type: 'email',-->
<!--                    prompt: '请填写正确的邮箱地址'-->
<!--                }]-->
<!--            }-->
<!--        }-->
<!--    });-->


<!--    $(function () {-->
<!--        $("#comment-container").load(/*[[@{/comment}]]*/"comment/");-->
<!--    });-->

<!--    $('#commentpost-btn').click(function () {-->
<!--        var boo = $('.ui.form').form('validate form');-->
<!--        if (boo) {-->
<!--            console.log('校验成功');-->
<!--            postData();-->
<!--        } else {-->
<!--            console.log('校验失败');-->
<!--        }-->
<!--    });-->

<!--    function postData() {-->
<!--        $("#comment-container").load(/*[[@{/comment}]]*/"",{-->
<!--            "parentComment.id" : $("[name='parentComment.id']").val(),-->
<!--            "nickname": $("[name='nickname']").val(),-->
<!--            "email"   : $("[name='email']").val(),-->
<!--            "content" : $("[name='content']").val()-->
<!--        },function (responseTxt, statusTxt, xhr) {-->
<!--            // $(window).scrollTo($('#goto'),0);-->
<!--            clearContent();-->
<!--        });-->
<!--    }-->

<!--    function clearContent() {-->
<!--        $("[name='nickname']").val('');-->
<!--        $("[name='email']").val('');-->
<!--        $("[name='content']").val('');-->
<!--        $("[name='parentComment.id']").val(-1);-->
<!--        $("[name='content']").attr("placeholder", "请输入评论信息...");-->
<!--    }-->

<!--    function reply(obj) {-->
<!--        var commentId = $(obj).data('commentid');-->
<!--        var commentNickname = $(obj).data('commentnickname');-->
<!--        $("[name='content']").attr("placeholder", "@"+commentNickname).focus();-->
<!--        $("[name='parentComment.id']").val(commentId);-->
<!--        $(window).scrollTo($('#comment-form'),500);-->
<!--    }-->
<!--</script>-->
</body>
</html>